<template>
 <view>
    <!-- 导航条 -->
    <view class="nav">
      <u-tabs :list="list1"   lineColor="#ef4f3f" @click="click">
         <view class="goods-body">
          <goods-list :status="status"></goods-list>
              </view>
      </u-tabs>
       </view>
    <!-- 任务列表 -->
    <view class="list">
      <view class="top">
        <view class="number">任务编号:XAHH1234567 </view>
       <u-tag text="以延迟" shape="circle" color="#EF4F3F" borderColor="#EF4F3F" bgColor="#fff" size="mini"></u-tag>
      </view>
      <view class="center">
      <u-steps :current="1" direction="column">
      	<u-steps-item title="陕西西安临潼 西安市临潼区秦岭" >
          <text class="slot-icon" slot="icon">起</text>
        </u-steps-item>
      
      	<u-steps-item title="陕西西安临潼 西安市临潼区秦岭">
      		<text class="slot-icon" slot="icon" style="background-color:#ef4f3f; ">止</text>
      	</u-steps-item>
      </u-steps>
      </view>
      <view class="bottom">
       <view class="left">
        <view style=" font-size: 14px;">提货时间</view> 
         <view style="font-size: 12px;">2023-01-11 21:01:00</view> 
       </view> 
       <view class="right">
       <text>提货</text>
       </view> 
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: '',
    components: {},
     computed:{
            status(){
              switch(this.item){
                case 0 :
                    return '1'
                case 1:
                   return '2'
                case 2:
                  return '6'
                  default:
                  return '1'
              }
            }
          },
    data() {
      return {
        list1: [{ name: '待提货'}, { name: '在途'  },  {name: '已完成' }],
        keyword: ''
      
      };
     
    },
    created(){},
    mounted(){},
    onLoad(){},
    methods: {
       click(item) {
                     console.log('item', item);
                 } 
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #f5f5f5;
  }

.nav{
  width: 375px;
  height: 50px;
  background: #FFFFFF;
   font-weight: 600;
   font-size: 16px;
   color: #2A2929;
}
.list{
  width: 345px;
  height: 229px;
  background: #FFFFFF;
  border-radius: 10px;
  margin-top: 20px;
 transform: translateX(13px);
 
  
 .number{
  padding-left: 20px;
  width: 284px;
  height: 22px;
  font-weight: 500;
  font-size: 16px;
  color: #2A2929;

  
 }
}
.top{
 display: flex;
  text{
    flex:1;
  }
}

.slot-icon {
		width: 21px;
		height: 21px;
		background-color:#2a2929;
		border-radius: 100px;
		font-size: 12px;
		color: #fff;
		line-height: 21px;
		text-align: center;
	}
    ::v-deep .u-steps-item__line--column {
      background-color: transparent !important;
      border: 1px solid #d9d9d9;
      width: 0px;
    }
 .center{
   font-weight: 400;
   font-size: 14px;
   color: #818181;
  overflow: hidden;
 }
 .bottom{
   border-top: 1px solid #eeeeee; 
   display: flex;
   justify-content: space-around;
 }
 .left{
 width: 117px;
 height: 40px;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 
 }
 .right{
   width: 70px;
   height: 25px;
   font-weight: 400;
   font-size: 14px;
   color: #FFFFFF;
   text-align: center;
   line-height: 25px;
   background-color: #ef4f3f;
   border-radius: 15px;
 }
</style>
